<template>
    <section>
        <!--工具条-->
        <el-row :gutter="20" class="toolbar" style="margin: 10px 0 0 0; padding-bottom: 0; padding-right: 0;">
            <el-col :span="11" style="padding: 0;">
                <el-form :inline="true">
                    <el-form-item>
                        <el-button @click="reloadPage">刷新</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="danger" :disabled="blacklist.length===0" @click="setBlacklist">设置黑名单</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :disabled="blacklist.length===0" @click="cancelSetBlacklist">取消黑名单</el-button>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="warning" :disabled="blacklist.length===0" @click="deleteFans">删除</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="13" style="padding: 0;text-align: right;">
                <el-form :inline="true" >
                    <el-form-item>
                        <el-input placeholder="可搜索昵称/姓名/手机号/ID" v-model="searchKeyWord"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchList">搜索</el-button>
                    </el-form-item>

<!--                    <el-form-item>-->
<!--                        <el-button type="primary">其他</el-button>-->
<!--                    </el-form-item>-->
                </el-form>
            </el-col>
        </el-row>

<!--        筛选区域-->
<!--        <el-select v-model="attention" placeholder="关注" @change="selectAttention">-->
<!--            <el-option-->
<!--                    v-for="item in attentions"-->
<!--                    :key="item.value"-->
<!--                    :label="item.label"-->
<!--                    :value="item.value">-->
<!--            </el-option>-->
<!--        </el-select>-->
<!--        <el-select v-model="attention" placeholder="会员区域" @change="selectAttention">-->
<!--            <el-option-->
<!--                    v-for="item in attentions"-->
<!--                    :key="item.value"-->
<!--                    :label="item.label"-->
<!--                    :value="item.value">-->
<!--            </el-option>-->
<!--        </el-select>-->
<!--        <el-select v-model="attention" placeholder="黑名单" @change="selectAttention">-->
<!--            <el-option-->
<!--                    v-for="item in attentions"-->
<!--                    :key="item.value"-->
<!--                    :label="item.label"-->
<!--                    :value="item.value">-->
<!--            </el-option>-->
<!--        </el-select>-->
<!--        <el-select v-model="attention" placeholder="注册时间" @change="selectAttention">-->
<!--            <el-option-->
<!--                    v-for="item in attentions"-->
<!--                    :key="item.value"-->
<!--                    :label="item.label"-->
<!--                    :value="item.value">-->
<!--            </el-option>-->
<!--        </el-select>-->

        <!--列表-->
        <el-table
                stripe
                ref="multipleTable"
                :data="MemberList"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="粉丝"
                    width="180">
                <template slot-scope="scope">
                    <img :src="scope.row.avatar" alt="" class="fan-head">
                    <span>{{scope.row.nickname}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="会员信息"
                    width="120">
                <template slot-scope="scope">
                    <p style="text-align: center">
                        <span>{{scope.row.babyname}}</span><br>
                        <span v-show="scope.row.mobile">{{scope.row.mobile.slice(0, 3) + '****' + scope.row.mobile.slice(scope.row.mobile.length-4)}}</span>
                    </p>
                </template>
            </el-table-column>
            <el-table-column
                    prop="city"
                    label="等级/城市"
                    show-overflow-tooltip>
                <template slot-scope="scope">
                    <p>
                        <span>{{scope.row.ismember === 1 ? '会员' : '非会员'}}</span><br>
                        <span>{{scope.row.city + scope.row.area}}</span>
                    </p>
                </template>
            </el-table-column>
            <el-table-column
                    prop="create_time"
                    label="注册时间"
                    show-overflow-tooltip>
                <template slot-scope="scope">
                    <p style="text-align: center">
                        <span>{{scope.row.create_time.split(' ')[0]}}</span><br>
                        <span>{{scope.row.create_time.split(' ')[1]}}</span>
                    </p>
                </template>
            </el-table-column>
            <el-table-column
                    prop="balance"
                    label="余额"
                    show-overflow-tooltip>
                <template slot-scope="scope">
                    <p style="background-color: #67C23A;padding: 2px 4px;color: #fff;border-radius: 3px;font-size: 10px;width: 40px;text-align: center;height: 20px">{{ scope.row.balance}}</p><br>
                </template>
            </el-table-column>
            <el-table-column
                    label="成交">
                <template slot-scope="scope">
                    <p style="display: flex;flex-direction: column">
                        <span class="order">订单: {{scope.row.order_finish_count}}</span>
                        <span class="money" style="margin-top: 5px">金额: {{scope.row.order_finish_sum}}</span>
                    </p>
                </template>
            </el-table-column>
            <el-table-column
                    label="关注/黑名单">
                <template slot-scope="scope">
                    <p style="display: flex;flex-direction: column">
                        <span :class="[scope.row.follow===1 ? 'follow' : 'un-follow']">{{scope.row.follow===1 ? '已关注' : '未关注'}}</span>
                        <span :class="[scope.row.isblack===1 ? 'un-is-black' : 'is-black']" style="margin-top: 5px">{{scope.row.isblack===1 ? '黑名单' : '正常'}}</span>
                    </p>
                </template>
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="操作">
                <template slot-scope="scope">
<!--                    <el-button-group>-->
<!--                        <el-button type="primary" icon="el-icon-document" size="mini" @click="detail(scope.row)" title="会员详情"></el-button>-->
<!--                        <el-button type="info" icon="el-icon-s-order" size="mini" @click="order(scope.row)" title="会员订单"></el-button>-->
<!--                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteMember(scope.row)" title="删除会员"></el-button>-->
<!--                    </el-button-group>-->
                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                        <el-button size="mini" @click="detail(scope.row)" icon="el-icon-edit" circle></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="会员订单" placement="top">
                        <el-button size="mini" @click="order(scope.row)" icon="fa fa-navicon" circle></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                        <el-button size="mini" type="danger" @click="deleteMember(scope.row)" icon="el-icon-delete" circle></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <!-- 页码 -->
        <el-col :span="24" class="toolbar">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">
            </el-pagination>
        </el-col>

<!--        这是会员详情的弹出框 -->
        <el-dialog
                title="会员详情"
                :visible.sync="detailDialogVisible"
                width="80%"
                center
                :before-close="handleClose"
                @close="closeMemberDetail">
            <el-tabs type="border-card">
                <el-tab-pane label="基本信息">
                    <div class="dialog-fans">
                        <strong>粉丝</strong>
                        <img :src="oneDetail.avatar" alt="" style="width: 30px;height: 30px;border-radius: 50%;">
                        <span style="font-size: 12px">{{oneDetail.nickname}}</span>
                    </div>
                    <div class="dialog-fans">
                        <strong>OPENID</strong>
                        <span>{{oneDetail.openid}}</span>
                    </div>
                    <div class="dialog-fans" style="">
                        <strong>宝宝姓名</strong>
                        <el-input v-model="oneDetail.babyname" style="width: 40%;"></el-input>
                    </div>
                    <div class="dialog-fans">
                        <strong>出生日期</strong>
                        <el-date-picker
                                v-model="oneDetail.birthday"
                                type="date">
                                placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="dialog-fans">
                        <strong>联系电话</strong>
                        <el-input v-model="oneDetail.mobile" style="width: 40%;"></el-input>
<!--                        <span>{{oneDetail.mobile}}</span>-->
                    </div>
                    <div class="dialog-fans">
                        <strong>所在城市</strong>
<!--                        <el-cascader v-model="areas" :options="options" @change="handleChangeArea"></el-cascader>-->
                        <el-cascader v-model="oneDetail.areas" :options="options" @change="handleChangeArea"></el-cascader>
<!--                        <span>{{oneDetail.province + oneDetail.city + oneDetail.area}}</span>-->
                    </div>
                    <div class="dialog-fans">
                        <strong>是否会员</strong>
                        <el-switch
                                v-model="oneDetail.ismember"
                                active-text="是"
                                inactive-text="否"
                                :active-value="1"
                                :inactive-value="0">
                        </el-switch>
                    </div>
                    <div class="dialog-fans" v-if="oneDetail.ismember===1">
                        <strong>所属品牌</strong>
                        <el-select v-model="oneDetail.brand_id" placeholder="请选择">
                            <el-option
                                v-for="item in brands"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="dialog-fans" v-if="oneDetail.ismember===1">
                        <strong>所属门店</strong>
                        <el-select v-model="oneDetail.center_id" placeholder="请选择">
                            <el-option
                                v-for="item in centers"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="dialog-fans">
                        <strong>余额</strong>
                        <span>{{oneDetail.balance}}</span>
                    </div>
                    <div class="dialog-fans">
                        <strong>注册时间</strong>
                        <span>{{oneDetail.create_time}}</span>
                    </div>
                    <div class="dialog-fans">
                        <strong>关注状态</strong>
                        <span style="display: inline-block;background-color: #409EFF;border-radius: 3px;color: #fff;padding: 2px 3px;">{{oneDetail.follow===0 ? '未关注' : '已关注'}}</span>
                    </div>
                    <div class="dialog-fans">
                        <strong>黑名单</strong>
                        <el-switch
                                v-model="isOrBlacklist"
                                active-text="是"
                                inactive-text="否"
                                @change="switchEvent">
                        </el-switch>
<!--                        <el-radio v-model="oneDetail.isblack + ''" label=1>是</el-radio>-->
<!--                        <el-radio v-model="oneDetail.isblack + ''" label=0>否</el-radio>-->
                        <span>设置黑名单后，此会员无法访问商城</span>
                    </div>
                    <div style="display: flex;justify-content: center;margin-top: 10px">
                        <el-button type="primary" @click="submitInfo">提交</el-button>
                        <el-button @click="detailDialogVisible = false">返回列表</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="交易信息">
                    <div class="dialog-fans">
                        <strong style="width: 142px;">成交订单数</strong>
                        <span>{{oneDetail.nickname}}</span>
                    </div>
                    <div class="dialog-fans">
                        <strong style="width: 142px;">成交金额</strong>
                        <span>{{oneDetail.nickname}}</span>
                    </div>
                    <div class="dialog-fans">
                        <strong style="width: 142px;">最后一次成交时间</strong>
                        <span>{{oneDetail.nickname}}</span>
                    </div>
                    <div style="display: flex;justify-content: center;margin-top: 10px">
<!--                        <el-button type="primary">提交</el-button>-->
                        <el-button @click="detailDialogVisible = false">返回列表</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="分销商信息">分销商信息</el-tab-pane>
                <el-tab-pane label="社区信息">社区信息</el-tab-pane>
            </el-tabs>
<!--            <span slot="footer" class="dialog-footer">-->
<!--                <el-button @click="detailDialogVisible = false">取 消</el-button>-->
<!--                <el-button type="primary" @click="detailDialogVisible = false">确 定</el-button>-->
<!--            </span>-->
        </el-dialog>

<!--        这是会员订单的弹出框 -->
        <el-dialog title="订单管理" :visible.sync="outerVisible" width="70%"  center :close-on-click-modal="false">
            <div style="width: 100%;border-bottom: 1px solid #999;padding-bottom: 5px;">订单数: {{totalCount2}} 订单金额: {{orderAmount}}</div>
            <div style="margin-top: 10px;display: flex;margin-bottom: 10px;">
                <el-select v-model="paymentVal" placeholder="支付方式" @change="selectPayment">
                    <el-option
                            v-for="item in payment"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="selectTime" placeholder="不按时间" style="width: 10%" @change="selectTimeDialogText">
                    <el-option
                            v-for="item in selectTimes"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-date-picker
                        v-model="dialogTime"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                        @change="selectDialogTimeNumber">
                </el-date-picker>
                <el-select v-model="memberId" placeholder="会员编号" style="width: 10%" @change="selectMemberId">
                    <el-option
                            v-for="item in memberIds"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-input v-model="searchKey" placeholder="请输入内容" style="width: 20%"></el-input>
                <el-button type="primary" @click="searchOrder">搜索</el-button>
                <el-button type="primary" plain>导出</el-button>
            </div>
            <el-table
                    :data="tableData"
                    height="450"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="ordersn"
                        label="订单编号"
                        width="150">
                </el-table-column>
                <el-table-column
                        label="活动"
                        width="220">
                    <template slot-scope="scope">
                        <div style="display: flex">
                            <div><img :src="scope.row.avatar" alt="" style="width: 50px;height: 50px;background-color:red;"></div>
                            <div class="content-title" style="display: flex;flex: 1">
                                <span>{{ scope.row.title }}</span>
                                <span>{{ scope.row.subtitle }}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="单价/数量	"
                        width="100">
                    <template slot-scope="scope">
                        <div class="content-title">
                            <span>{{ scope.row.price }}</span>
                            <span>×1</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="会员"
                        width="110">
                    <template slot-scope="scope">
                        <div class="content-title">
                            <span>{{ scope.row.nickname }}</span>
                            <span>{{ scope.row.mobile }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="支付方式"
                        width="100">
                    <template slot-scope="scope">
                        <span v-if="scope.row.paytype === 0" style="color: #1c84c6;">未支付</span>
                        <span v-if="scope.row.paytype === 1" style="color: #1c84c6;">微信支付</span>
                        <span v-if="scope.row.paytype === 2" style="color: #1c84c6;">支付宝支付</span>
                        <span v-if="scope.row.paytype === 3" style="color: #1c84c6;">银联支付</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="价格"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="create_time"
                        label="下单时间"
                        width="160">
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="状态"
                        width="100">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status === 0" style="color: #1c84c6;">待付款</span>
                        <span v-if="scope.row.status === 1" style="color: #1c84c6;">已付款</span>
                        <span v-if="scope.row.status === 2" style="color: #1c84c6;">待核销</span>
                        <span v-if="scope.row.status === 3" style="color: #1c84c6;">已完成</span>
                        <span v-if="scope.row.status === 4" style="color: #1c84c6;">已关闭</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="查看详情"
                        width="120">
                    <template slot-scope="scope">
                        <el-button
                                @click="lookDetail(scope.$index, scope.row)">查看详情</el-button>
                    </template>
<!--                    <span class="lookDetail" @cell-click="lookDetail">查看详情</span>-->
                </el-table-column>
                <el-table-column
                        label="关闭订单"
                        width="120">
                    <template slot-scope="scope">
                        <el-button
                                type="danger"
                                @click="shutDetail(scope.$index, scope.row)">关闭订单</el-button>
                    </template>
<!--                    <span class="lookDetail">关闭订单</span>-->
                </el-table-column>
            </el-table>
            <el-dialog
                    width="70%"
                    title="订单详情"
                    :visible.sync="innerVisible"
                    append-to-body>
<!--                <el-steps :active="active" align-center>-->
<!--                    <el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>-->
<!--                    <el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>-->
<!--                    <el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>-->
<!--                    <el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>-->
<!--                </el-steps>-->
                <el-steps :active="getState" align-center>
                    <el-step title="会员下单" :description="currentOrder.create_time"></el-step>
                    <el-step title="会员付款" :description="currentOrder.paytime"></el-step>
                    <el-step title="确认使用" :description="currentOrder.verifytime"></el-step>
                    <el-step title="订单完成" :description="currentOrder.finish_time"></el-step>
                </el-steps>
                <!--            订单信息这块-->
                <div class="order-info">
                    <div class="detail-order" style="border-right: 1px solid #f2f2f2;width: 30%;padding-left: 10px;">
                        <div class="left-top">
                            <h2>订单信息</h2>
                            <p>订单编号：	{{currentOrder.ordersn}}</p>
                            <p>订单金额：	{{currentOrder.price}}</p>
                        </div>
                        <div class="left-bottom">
                            <p>核销方式：{{currentOrder.verifytype_text}}</p>
                            <p>消费码：{{currentOrder.address}}</p>
                            <p>会员：	<span style="color: #337ab7;">{{currentOrder.nickname}}</span></p>
                            <p>联系方式：{{currentOrder.mobile}}</p>
                        </div>
                    </div>
                    <div class="state-order">
                        <div class="right-top" style="height: 50%;padding-top: 10px;">
                            <span>订单状态:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<em style="font-style: normal;color: #999;font-size: 22px;font-weight: 600">{{currentOrder.status_text}}</em></span>
                            <!--                        <p style="padding-left: 85px;">等待会员付款</p>-->
                        </div>
                    </div>
                </div>
                <!--            活动信息这块-->
                <div class="active-info">
                    <h3 style="margin: 0;padding-bottom: 5px;">
                        活动信息
                    </h3>
                    <div class="active-bottom">
                        <div class="active-title">
                            <strong>标题</strong>
                            <strong>规格</strong>
                            <strong>单价(元)/数量</strong>
                            <strong>折扣前/折扣后(元)</strong>
                        </div>
                        <div class="active-title-info">
                            <span style="color: #337ab7;cursor: pointer">{{currentOrder.subtitle}}</span>
                            <span>11111</span>
                            <span>{{currentOrder.price}} ×1</span>
                            <span>{{currentOrder.price}}/{{currentOrder.price}}</span>
                        </div>
                    </div>
                </div>
                <div style="text-align: center;margin-top: 10px;">
                    <el-button type="primary" @click="innerVisible = false">确定</el-button>
                </div>
            </el-dialog>
            <div slot="footer" class="dialog-footer">
                <el-button @click="outerVisible = false">取 消</el-button>
<!--                <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>-->
            </div>

        </el-dialog>

<!--        关闭订单的dialog-->
        <el-dialog
                title="关闭订单"
                :visible.sync="dialogCloseOrder"
                width="40%">
            <el-input
                    type="textarea"
                    :rows="5"
                    placeholder="关闭订单原因"
                    v-model="textarea">
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogCloseOrder = false">取 消</el-button>
                <el-button type="primary" @click="makeSure">确 定</el-button>
            </span>
        </el-dialog>

    </section>
</template>

<script>
    // import { getMemberList } from '../../api/api';
    import { getMemberList,SetOrCancelBlacklist,editMemberInfo,getCityList, getBrandList, getStoreList } from '../../api/memberManagementAPI'
    import { waitPayment,orderDetail,closeOrder } from '../../api/order'
    import areaData from '../../common/js/country-level3-data'
    export default {
        name: "member-management",
        data () {
            return {
                totalCount: 0, // 总共多少条
                // pageSize: 2, // 每页显示条目个数
                // pageSizes: [1, 2, 3, 4], // 每页显示个数选择器的选项设置
                pageSize: 10, // 每页显示条目个数
                pageSizes: [10, 20, 30, 40], // 每页显示个数选择器的选项设置
                currentPage: 1, // 当前页数
                searchKeyWord: '', // 可搜索昵称/姓名/手机号/ID 绑定的值
                babyBirthday: '', //宝宝生日
                oneDetail: {}, // 保存单个用户的信息
                detailDialogVisible: false, // 单个会员详情开关
                MemberList: [], // 会员列表
                attentions: [
                    {
                        value: 1,
                        label: '已关注'
                    },
                    {
                        value: 2,
                        label: '未关注'
                    }
                ],
                attention: '', // 关注的值
                blacklist: [], // 设置黑名单
                isOrBlacklist: false, // 当前这个用户是否是黑名单
                outerVisible: false, // 这下面2个属性是控制会员订单的dialog
                innerVisible: false,
                payment: [
                    {
                        value: '1',
                        label: '未支付'
                    },
                    {
                        value: '2',
                        label: '余额支付'
                    },
                    {
                        value: '3',
                        label: '后台付款'
                    },
                    {
                        value: '4',
                        label: '在线支付'
                    },
                    {
                        value: '5',
                        label: '微信支付'
                    },
                    {
                        value: '6',
                        label: '支付宝支付'
                    },
                    {
                        value: '7',
                        label: '银联支付'
                    },
                    {
                        value: '8',
                        label: '货到付款'
                    },
                    {
                        value: '9',
                        label: '微信银联支付'
                    }
                ], // 支付方式选择数据
                paymentVal: '', // 支付方式绑定的值
                selectTimes: [
                    {
                        value: '1',
                        label: '报名时间'
                    },
                    {
                        value: '2',
                        label: '付款时间'
                    },
                    {
                        value: '3',
                        label: '完成时间'
                    }
                ], // 不按时间
                selectTime: '', // 不按时间绑定的值
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            }
                        }
                    ]
                }, // 会员订单里面的时间选择快捷数据
                dialogTime: [], // 开始时间-结束时间
                memberId: '', // 会员编号绑定的值
                memberIds: [
                    {
                        value: '1',
                        label: '订单号'
                    },
                    {
                        value: '2',
                        label: '会员信息'
                    },
                    {
                        value: '3',
                        label: '活动名称'
                    },
                    {
                        value: '4',
                        label: '核销员'
                    },
                    {
                        value: '5',
                        label: '核销门店'
                    },
                    {
                        value: '6',
                        label: '核销码'
                    },
                    {
                        value: '7',
                        label: '会员编号'
                    },
                    {
                        value: '8',
                        label: '商户名称'
                    },
                ], // 会员编号选择的数据
                searchKey: '', // 会员订单里面输入框的内容
                tableData: [], // 会员订单里面表单数据
                citys: [
                    {
                        value: 1,
                        label: '北京'
                    },
                    {
                        value: 2,
                        label: '上海'
                    },
                ],  // 地址 三级联动
                city: '', // 绑定的地址
                active: 2, // 会员详情步骤条,
                currentOrder: {}, // 查看详情 当前点击的订单对象
                totalCount2: '', // 订单数
                orderAmount: '', // 金额
                userId: '', // 点击会员订单的时候的 id
                dialogCloseOrder: false, // 关闭订单的按钮
                textarea: '', // 关闭订单绑定的值
                userId2: '', // 点击关闭订单的时候的 id
                options: areaData, // 三级联动城市数据
                brands: [],  // 品牌
                centers: [], // 中心


            }
        },
        computed: {
            getState() {
                if (this.currentOrder.finish_time !== '') {
                    return 4
                } else if (this.currentOrder.verifytime !== '') {
                    return 3
                } else if (this.currentOrder.paytime !== '') {
                    return 2
                } else {
                    return 1
                }
            }
        },
        created() {
            this._getMemberList(); // 会员列表
        },
        methods: {
            searchList() {
                this._getMemberList(); // 会员列表
            },
            handleChangeArea(value) {
                console.log(value)
                this.areas = value
                let params = {city: this.areas[0]}
                getBrandList(params).then(res=> {
                    console.log(res)
                    this.brands = res.data.brands
                })
                getStoreList().then(res=> {
                    this.centers = res.data.store
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`)
                // 改变每页显示的条数
                this.pageSize = val
                this._getMemberList()
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage = 1
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`)
                this.currentPage = val;
                this._getMemberList()
            },
            // 关注和未关注事件
            selectAttention() {
                console.log(this.attention)
            },
            // 获取会员列表
            _getMemberList() {
                let params = {
                    p: this.currentPage,
                    length: this.pageSize,
                    keyword: this.searchKeyWord
                };
                console.log(this.pageSize)
                console.log(params)
                getMemberList(params).then(res => {
                    console.log(res.data.member,'会员列表')
                    this.MemberList = res.data.member;
                    console.log(res.data.total)
                    this.totalCount = res.data.total;
                    // this.MemberList = res.data.data.member;
                    // console.log(res.data.data.total)
                    // this.totalCount = res.data.data.total;
                    // console.log(res.data.data.member,'会员列表')
                }).catch(err => {
                    this.$message({
                        message: err.response.data.message,
                        type: 'error'
                    })
                })
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },

            // 打钩的事件
            handleSelectionChange(val) {
                this.blacklist = val;
                console.log(val)
            },

            // 刷新页面
            reloadPage() {
                // window.location.reload(); // 刷新当前页面
                location.reload();
            },

            // 批量设置黑名单
            setBlacklist() {
                let ids = this.blacklist.map(item => item.id)
                console.log(ids)
                this.$confirm('确认设置选中的粉丝吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    let data = {
                        ids: ids,
                        isblack: 1
                    }
                    console.log(data)
                    SetOrCancelBlacklist(data).then(res => {
                        this.$message({
                            type: 'success ',
                            message: '设置黑名单成功'
                        });
                        this._getMemberList();
                    }).catch(err => {
                        this.$message({
                            message: err.response.data.message,
                            type: 'error'
                        })
                    })
                }).catch(() => {
                    this.$message({
                        type: 'warning',
                        message: '网络错误，请重试'
                    });
                });
            },

            // 批量取消黑名单
            cancelSetBlacklist() {
                let ids = this.blacklist.map(item => item.id)
                console.log(ids)
                this.$confirm('确认取消吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    let data = {
                        ids: ids,
                        isblack: 0
                    };
                    console.log(data)
                    SetOrCancelBlacklist(data).then(res => {
                        this.$message({
                            type: 'success ',
                            message: '取消黑名单成功'
                        });
                        this._getMemberList();
                    }).catch(err => {
                        this.$message({
                            message: err.response.data.message,
                            type: 'error'
                        })
                    })
                }).catch(() => {
                    this.$message.info('已取消')
                })
            },

            // 删除粉丝
            deleteFans() {
                let ids = this.blacklist.map(item => item.id)
                console.log(ids)
                this.$confirm('确认删除选中的粉丝吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    let data = {
                        ids: ids,
                        delete: 1
                    }
                    console.log(data)
                    SetOrCancelBlacklist(data).then(res => {
                        this.$message({
                            type: 'success ',
                            message: '删除成功'
                        });
                    }).catch(err => {
                        this.$message({
                            message: err.response.data.message,
                            type: 'error'
                        })
                    })
                }).catch(() => {
                    this.$message({
                        type: 'warning',
                        message: '网络错误，请重试'
                    });
                });
            },

            // 会员详情
            detail(row) {
                // console.log(row)
                row.isblack===1 ? this.isOrBlacklist = true: this.isOrBlacklist = false
                this.oneDetail = row
                this.oneDetail.areas = [row.province, row.city, row.area]
                console.log(this.oneDetail)
                // this.areas[0] = row.province
                // this.areas[1] = row.city
                // this.areas[2] = row.area
                if (row.province) {
                    let params = {city: row.province}
                    getBrandList(params).then(res=> {
                        console.log(res)
                        this.brands = res.data.brands
                    })
                    getStoreList().then(res=> {
                        this.centers = res.data.store
                    })
                }

                this.detailDialogVisible = true
                this._getCityList()
            },
            _getCityList() {
                getCityList().then(res => {
                    console.log(res.data.citys)
                    this.citys = res.data.citys
                }).catch(err => {
                    this.$message({
                        message: err.response.data.message,
                        type: 'error'
                    })
                })
            },
            // 会员详情 弹出框的关闭按钮
            handleClose(done) {
                // this.$confirm('确认关闭？')
                //     .then(_ => {
                //         done();
                //     })
                //     .catch(_ => {});
                this.detailDialogVisible = false
            },
            // 会员订单,获取单个会员的订单列表
            order(row) {
                console.log(row)
                // 会员id 存下来
                this.userId = row
                this.outerVisible = true
                let params = {
                    p: this.currentPage, // 页码（默认1）
                    length: this.pageSize, // 每页数量（默认30）
                    keyword: this.searchKey, // 关键字
                    status: '', // 状态(0-待付款 1-已付款 2-待核销 3-已完成 4-已关闭)
                    is_refund: '', // 查询退款订单（1-查询退款订单）
                    refund_status: '', // 退款状态(0-申请退款 1-退款完成 2-拒绝退款 3-用户取消)（is_refund=1的时候才生效）
                    mid: this.userId.id // 会员id
                };
                waitPayment(params).then(res => {
                    console.log(res)
                    this.tableData = res.data.order
                    this.totalCount2 = res.data.total
                    this.orderAmount = res.data.orderAmount
                }).catch(err => {
                    this.$message({
                        message: err.response.data.message,
                        type: 'error'
                    })
                })
            },
            // 搜索会员订单
            searchOrder() {
                let params = {
                    p: this.currentPage, // 页码（默认1）
                    length: this.pageSize, // 每页数量（默认30）
                    keyword: this.searchKey, // 关键字
                    status: '', // 状态(0-待付款 1-已付款 2-待核销 3-已完成 4-已关闭)
                    is_refund: '', // 查询退款订单（1-查询退款订单）
                    refund_status: '', // 退款状态(0-申请退款 1-退款完成 2-拒绝退款 3-用户取消)（is_refund=1的时候才生效）
                    mid: this.userId // 会员id
                };
                waitPayment(params).then(res => {
                    console.log(res)
                    this.tableData = res.data.order
                    this.totalCount2 = res.data.total
                    this.orderAmount = res.data.orderAmount
                }).catch(err => {
                    this.$message({
                        message: err.response.data.message,
                        type: 'error'
                    })
                })
            },
            // 删除会员
            deleteMember(row) {
                console.log(row.id)
                // let ids = this.blacklist.map(item => item.id)
                // console.log(ids)
                this.$confirm('确认删除该粉丝吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    let data = {
                        ids: row.id,
                        delete: 1
                    }
                    console.log(data)
                    SetOrCancelBlacklist(data).then(res => {
                        this.$message({
                            type: 'success ',
                            message: '删除成功'
                        });
                    }).catch(err => {
                        this.$message({
                            message: err.response.data.message,
                            type: 'error'
                        })
                    })
                }).catch(() => {

                });
            },

            // 基本信息修改
            submitInfo() {
                let data = {
                    id: this.oneDetail.id,
                    mobile: this.oneDetail.mobile,
                    babyname: this.oneDetail.babyname,
                    birthday: this.$util.standardTimeToDate(this.oneDetail.birthday),
                    isblack: this.isOrBlacklist ? 1 : 0,
                    // province: this.areas[0],
                    // city: this.areas[1],
                    // area: this.areas[2],
                    province: this.oneDetail.areas[0],
                    city: this.oneDetail.areas[1],
                    area: this.oneDetail.areas[2],
                    // brand_id: this.brand_id,
                    // center_id: this.center_id,
                    brand_id: this.oneDetail.brand_id,
                    center_id: this.oneDetail.center_id,
                    ismember: this.oneDetail.ismember
                }
                console.log(data)
                editMemberInfo(data).then(res => {
                    this.$message.success('修改成功')
                    this._getMemberList()
                    this.detailDialogVisible = false
                }).catch(err => {
                    this.$message({
                        message: err.response.data.message,
                        type: 'error'
                    })
                })
            },
            closeMemberDetail() {
                this.areas = []
                this.brand_id = ''
                this.center_id = ''
            },
            // 支付方式选择的事件
            selectPayment() {
                console.log(this.paymentVal)
            },

            // 不按时间选择的事件
            selectTimeDialogText() {
                console.log(this.selectTime)
            },

            // 不按时间选择的时间
            selectDialogTimeNumber() {
                console.log(this.dialogTime[0]) // 得到的是中国标准时间 记得转换 开始时间
                console.log(this.dialogTime[1]) // 得到的是中国标准时间 记得转换 结束时间
            },

            // 选择会员编号
            selectMemberId() {
                console.log(this.memberId)
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },
            switchEvent(val) {
                console.log(val)
            },

            // 查看详情
            lookDetail(index, row) {
                console.log(index, row)
                this.innerVisible = true
                let data = { id: row.id }
                orderDetail(data).then(res => {
                    console.log(res);
                    this.currentOrder = res.data.order
                }).catch(err => {
                    this.$message({
                        message: err.response.data.message,
                        type: 'error'
                    })
                })
            },

            // 关闭订单
            shutDetail(index, row) {
                console.log(index, row)
                this.userId2 = row
                if (row.status === 4) {
                    this.$message.success('订单已关闭，无需重复关闭');
                } else {
                    this.dialogCloseOrder = true
                }
            },
            // 关闭订单的确定按钮
            makeSure() {
                let data = { id: this.userId2.id,remark: this.textarea}
                closeOrder(data).then(res => {
                    this.order(this.userId) // 重新请求改会员的订单列表
                    this.$message.success('关闭成功');
                    this.dialogCloseOrder = false
                    this.textarea = ''
                }).catch(err => {
                    this.$message({
                        message: err.response.data.message,
                        type: 'error'
                    })
                })
            }

        }
    }
</script>

<style scoped>
    .fan-head {
        width: 30px;
        height: 30px;
        margin-right: 5px;
        border-radius: 50%;
    }
    .order,.money,.follow,.is-black,.un-follow,.un-is-black {
        display: block;
        color: #fff;
        border-radius: 3px;
        padding: 0 3px;
        font-size: 11px;
        width: 72px;
        text-align: center;
    }
    .money,.un-is-black{
        background-color: rgb(26,179,148);
    }
    .order {
        background-color: rgb(237,85,101);
        margin-right: 3px;
    }
    .follow {
        background-color: #409EFF;
        margin-right: 3px;
    }
    .un-follow,.un-is-black {
        background-color: #909399;
        margin-right: 3px;
    }
    .is-black {
        background-color: rgb(26,179,148);
    }
    .dialog-fans strong {
        display: inline-block;
        width: 78px;
        text-align: right;
        font-size: 16px;
        margin-right: 50px;
        margin-bottom: 20px;
    }
    .lookDetail:hover {
        color: #409EFF;
        cursor: pointer;
    }
    .content-title {
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    .order-info {
        display: flex;
        height: 280px;
        border: 1px solid #f2f2f2;
        margin-top: 10px;
    }
    .state-order {
        margin-left: 50px;
    }
    .active-info {
        margin-top: 10px;
        height: 160px;
        border: 1px solid #f2f2f2;
    }
    .active-title {
        display: flex;
        border-bottom: 1px solid #f2f2f2;
        padding-bottom: 5px;
    }
    .active-title-info {
        display: flex;
        padding-bottom: 5px;
    }
    .active-title strong,.active-title-info span {
        width: 25%;
    }
    .active-title-info span {
        line-height: 60px;
    }
</style>
